<template>
	<view class="wrap">
		<view class="logo">链友融ERP&MES</view>
		<u-tabs :list="list" :is-scroll="false" :current="current" @change="onClickItem"></u-tabs>
		<view v-if="current === 0">
			<view class="list">
				<view class="list-call">
					<view class="iconfont icon-avatar" style="font-size: 40rpx;color:#5473e8;"></view>
					<input class="u-input" type="text" v-model="username" maxlength="32" :placeholder="$t('login.placeholderAccount')" value="admin" />
				</view>
				<view class="list-call">
					<view class="iconfont icon-key" style="font-size: 40rpx;color:#5473e8;"></view>
					<input
						class="u-input"
						type="text"
						v-model="password"
						maxlength="32"
						:placeholder="$t('login.placeholderPassword')"
						:password="!showPassword"
						value="admin123"
					/>
					<image class="u-icon-right" :src="'/static/aidex/login/eye_' + (showPassword ? 'open' : 'close') + '.png'" @click="showPass()"></image>
				</view>
				<view style="padding:15rpx 0 0;">
					<view class="register">
						<!-- 							<navigator class="register-link" url="forget" open-type="navigate">{{$t('login.forget')}}</navigator>
							<navigator class="register-link" url="reg" open-type="navigate">{{$t('login.reg')}}</navigator> -->
					</view>
					<u-checkbox v-model="remember" active-color="#5473e8">记住账号</u-checkbox>
				</view>
			</view>
			<view class="button" @click="submit('1')"><text>登录</text></view>
		</view>
		<view v-if="current === 1">
			<view class="list">
				<view class="list-call">
					<view class="iconfont icon-shouji" style="font-size: 40rpx;color:#5473e8;"></view>

					<u-field @input="valueFormat" v-model="username" label="+86" placeholder="请填写手机号" style="width: 100%;" :border-bottom="false"></u-field>
				</view>
				<view class="list-call">
					<view class="iconfont icon-key" style="font-size: 40rpx;color:#5473e8;"></view>
					<input
						class="u-input"
						type="text"
						v-model="password"
						maxlength="32"
						:placeholder="$t('login.placeholderPassword')"
						:password="!showPassword"
						value="admin123"
					/>
					<image class="u-icon-right" :src="'/static/aidex/login/eye_' + (showPassword ? 'open' : 'close') + '.png'" @click="showPass()"></image>
				</view>
				<view style="padding:15rpx 0 0;">
					<view class="register">
						<!-- <navigator class="register-link" url="forget" open-type="navigate">{{$t('login.forget')}}</navigator>
							<navigator class="register-link" url="reg" open-type="navigate">{{$t('login.reg')}}</navigator> -->
					</view>
					<u-checkbox v-model="remember" active-color="#5473e8">记住手机号</u-checkbox>
				</view>
			</view>

			<view class="button" @click="submit('2')"><text>登录</text></view>
		</view>
		<!-- <view class="fiex-view">
			<view class="config—host-view" @click="navToConfig">
				<image class="setting-icon" src="../../../static/aidex/login/icon_login_setting.png"></image>
				<text class="setting-txt">配置服务地址</text>
			</view>
		</view> -->
	</view>
</template>
<script>
/**
 * Copyright (c) 2013-Now http://aidex.vip All rights reserved.
 */
import base64 from '@/common/base64.js';
export default {
	data() {
		return {
			username: '',
			password: '',
			showPassword: false,
			remember: true,
			list: [{ name: '用户名' }],
			current: 0
		};
	},
	onLoad() {
		this.refreshData();
		// this.$u.api.index({loginCheck: true}).then(res => {
		// 	if (res.code == '200'){
		// 		uni.reLaunch({
		// 			url: '/pages/sys/msg/index'
		// 		});
		// 	}
		// });
	},
	methods: {
		valueFormat(value) {
			// value = value.replace(/[^\d]/g,'')
			// this.username = value;
			// console.log(this.username)
		},
		navToConfig() {
			uni.navigateTo({
				url: '/pages/sys/config/config'
			});
		},
		showPass() {
			this.showPassword = !this.showPassword;
		},
		qiehuanLogin() {
			this.loginType = 'other';
		},
		refreshData() {
			if (this.current == 0) {
				this.username = this.vuex_login_account;
			}
			if (this.current == 1) {
				this.username = this.vuex_login_phone;
			}

			this.password = '';
			this.showPassword = false;
			this.remember = true;
		},
		onClickItem(index) {
			this.current = index;
			this.refreshData();
		},
		submit(loginType) {
			if (this.username.length == 0) {
				this.$u.toast(loginType == 1 ? '请输入账号' : '请输入手机号');
				return;
			}
			if (this.password.length == 0) {
				this.$u.toast('请输入密码');
				return;
			}
			this.$u.api
				.login({
					username: this.username,
					password: this.password,
					loginType: loginType
				})
				.then(res => {
					if (res.msg) {
						this.$u.toast(res.msg);
					}
					if (res.code == '200') {
						uni.reLaunch({
							url: '/pages/sys/home/index'
						});
					}
					if (this.remember) {
						if (this.current == 0) {
							this.$u.vuex('vuex_login_account', this.username);
						}
						if (this.current == 1) {
							this.$u.vuex('vuex_login_phone', this.username);
						}
					} else {
						if (this.current == 0) {
							this.$u.vuex('vuex_login_account', '');
						}
						if (this.current == 1) {
							this.$u.vuex('vuex_login_phone', '');
						}
					}
				});
		}
	}
};
</script>
<style lang="scss">
@import 'index.scss';

.config—host-view {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	.setting-icon {
		width: 50rpx;
		height: 50rpx;
	}
	.setting-txt {
		padding-top: 10rpx;
		font-size: 24rpx;
		color: #3c3c3c;
	}
}
.fiex-view {
	position: fixed;
	bottom: 50px;
	left: 0;
	width: 100%;
}

.logo {
	font-size: 64rpx;
	color: #5473e8;
	text-align: center;
	margin: 80rpx auto 80rpx auto;
}
.list-call-icon {
	color: #ff0000;
}
.currentPhone-box {
	text-align: center;
	padding: 40rpx 80rpx;
	.number-text {
		color: #000000;
		font-size: 60rpx;
	}
	.other-text {
		color: #999999;
		font-size: 26rpx;
		padding: 20rpx 0;
	}
	.u-btn {
		margin: 30rpx auto;
	}
	.u-hairline-border {
		border: 1px solid #fff;
	}
}

.register {
	display: inline-block;
	color: #5473e8;
	height: 40rpx;
	line-height: 40rpx;
	font-size: 28rpx;
	float: right;
	margin-top: 6rpx;
}
.register-link {
	float: right;
	padding: 0 16rpx;
}
.reg-link {
	display: inline-block;
	color: #5473e8;
}
.oauth2 {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	margin: 0rpx 100rpx 30rpx;

	image {
		height: 80rpx;
		width: 80rpx;
	}
}
.u-tabs {
	padding: 0 70rpx;
}
</style>
